<template>
    <div class="main">
        <!-- 卡片组件一 -->
        <el-card class="box-card">
            <el-form ref="ruleFormRef" :model="form" :rules="rules" label-width="120px" class="demo-ruleForm"
                :size="formSize" status-icon>
                <el-form-item label="商品sku(介绍)" :label-width="112" />
                <el-form-item label="商品名称" prop="title" :label-width="140">
                    <el-input v-model.trim="form.title" />
                </el-form-item>
                <el-form-item label="原始价格" prop="originalPrice" :label-width="140">
                    <el-input v-model.trim="form.originalPrice" autocomplete="off">
                        <template #append>元</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="当前价格" prop="price" :label-width="140">
                    <el-input v-model.trim="form.price" autocomplete="off">
                        <template #append>元</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="会员价格" prop="vipPrice" :label-width="140">
                    <el-input v-model.trim="form.vipPrice" autocomplete="off">
                        <template #append>元</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="剩余库存" :label-width="140">
                    <el-input v-model="form.stock" :disabled="true" />
                </el-form-item>
                <el-form-item label="运费模版" :label-width="140">
                    <el-select v-model="form.freightTemplateId" clearable class="m-2" placeholder="选择商品运费模版">
                        <el-option v-for="item in freightType" :key="item.id" :label="item.title" :value="item.id"
                            clearable />
                    </el-select>
                </el-form-item>
                <el-form-item label="是否在售" :label-width="140" prop="status">
                    <el-radio-group v-model="form.status" class="ml-4">
                        <el-radio :label="1">在售</el-radio>
                        <el-radio :label="0">下架</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="商品图片" prop="imgUrl" :label-width="140">
                    <el-upload class="avatar-uploader" action="http://192.168.1.188:8080/upload/admin"
                        v-model="form.img" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"
                        :headers="headers" list-type="picture-card" :on-remove="handleRemove" :limit="5"
                        :on-exceed="handleLimit">
                        <el-icon class="avatar-uploader-icon">
                            <Plus />
                        </el-icon>
                    </el-upload>
                </el-form-item>
                <el-form-item label="商品单位" prop="unit" :label-width="140">
                    <el-input v-model.trim="form.unit" placeholder="  件 /  个 / 盒" />
                </el-form-item>
                <el-form-item label="所属类目" :label-width="140">
                    <!-- 级联选择器组件 -->
                    <el-cascader v-model="form.categoryId" :options="categoryDate"
                        :props="{ emitPath: false, label: 'title', value: 'id', children: 'childrenList' }"
                        placeholder="请选择类目" filterable clearable />
                </el-form-item>
                <el-form-item label="商品简介" :label-width="140">
                    <el-input v-model.trim="form.description" />
                </el-form-item>
                <el-form-item label="商品详细介绍简介" :label-width="140">
                    <!-- 富文本框内容 -->
                    <div style="width: 100%;">
                        <TEditor v-model="form.detail" @getContent="getText" />
                    </div>
                </el-form-item>
            </el-form>
        </el-card>
        <!-- 卡片组件二 -->
        <el-card class="box-card">
            <div>
                <p>
                <h4>商品参数</h4>
                </p>
                <p> <el-button type="primary" plain @click="add">添加</el-button></p>
                <!-- 表格组件 -->
                <div>
                    <el-table style="width: 100%" :data="form.attributeList">
                        <el-table-column prop="attribute" label="商品参数名称" width="500" style="margin-left: 20px;" />
                        <el-table-column prop="value" label="商品参数值" width="550" />
                        <el-table-column label="操作">
                            <template #default="scope">
                                <el-button type="danger" @click="handlDelt(scope.$index)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <!-- 对话框 -->
                <el-dialog v-model="dialogVisible" title="设置商品参数" width="40%">
                    <template #footer>
                        <el-form ref="ruleFormRef" :model="setParamsform" :rules="rules" label-width="120px"
                            class="demo-ruleForm" :size="formSize" status-icon>
                            <el-form-item label="商品参数名称" prop="attribute" :label-width="140">
                                <el-input v-model="setParamsform.attribute" clearable />
                            </el-form-item>
                            <el-form-item label="商品参数值" prop="value" :label-width="140">
                                <el-input v-model="setParamsform.value" clearable />
                            </el-form-item>
                        </el-form>
                        <span class="dialog-footer">
                            <el-button @click="dialogVisible = false">取消</el-button>
                            <el-button type="primary" @click="confrimParams">
                                确定
                            </el-button>
                        </span>
                    </template>
                </el-dialog>
            </div>
        </el-card>
        <!-- 卡片组件三 -->
        <el-card class="box-card">
            <div>
                <p>
                <h4>规格维度</h4>
                </p>
                <p> <el-button type="primary" plain @click="adds">添加</el-button></p>
                <!-- 表格组件 -->
                <div>
                    <el-table style="width: 100%" :data="form.specificationList">
                        <el-table-column prop="sizeId" label="维度id" align="center" />
                        <el-table-column prop="title" label="维度名称" align="center" />
                        <el-table-column label="创建时间" align="center">
                            <template #default="scope">
                                <span>{{ friendlyDates(scope.row.gmtCreate) }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" align="center">
                            <template #default="scope">
                                <el-button type="primary" @click="handlEdit(scope.$index, scope.row)">修改</el-button>
                                <el-button type="danger" @click="handlDelts(scope.$index)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <!-- 对话框 -->
                <el-dialog v-model="dialogVisibles" :title="bool == true ? '设置规格维度' : '修改规格维度'" width="40%">
                    <template #footer>
                        <el-form ref="ruleFormRef" :model="sizeForm" :rules="rules" label-width="120px"
                            class="demo-ruleForm" :size="formSize" status-icon>
                            <el-form-item label="类型名称" prop="title" :label-width="140">
                                <el-input v-model="sizeForm.title" clearable />
                            </el-form-item>
                        </el-form>
                        <span class="dialog-footer">
                            <el-button @click="dialogVisibles = false">取消</el-button>
                            <el-button type="primary" @click="confrimSize">
                                确定
                            </el-button>
                        </span>
                    </template>
                </el-dialog>
            </div>
        </el-card>
        <!-- 卡片组件四 -->
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <p>
                    <h4>商品sku详情</h4>
                    </p>
                    <p>
                        <el-button type="primary" plain @click="bulkPricing">批量定价</el-button>
                    </p>
                </div>
            </template>
            <!-- 中间部分 -->
            <div style="overflow: hidden;">
                <p>
                <p v-for="item in form.specificationList" :key="item.title">
                    <span>
                        <el-tag type="warning">
                            {{ item.title }}
                        </el-tag>
                        <!-- 新增的tag标签内容 -->
                        <el-tag v-for="tag in item.values" :key="tag" class="mx-1" closable :disable-transitions="false"
                            @close="handleClose(item, tag)">
                            {{ tag }}
                        </el-tag>
                        <!-- 显示的输入框 -->
                        <el-input v-if="item.inputSkuTagVisible" ref="InputRef" v-model.trim="item.inputSkuTagValue"
                            class="ml-1 w-20" size="small" @keyup.enter="handleInputConfirm(item)"
                            @blur="handleInputConfirm(item)" style="width: 100px;height: 30px;margin: 7px 3px;" />
                        <el-button v-else class="button-new-tag ml-1" @click="showInput(item)" :icon="Plus"
                            size="default">
                            添加
                        </el-button>
                    </span>
                </p>
                </p>
            </div>
            <!-- sku表格部分 -->
            <!-- 整体渲染sku表 1 -->
            <div style="margin-top: 20px;" :data="form.skuList">
                <!-- 循环纬度规格表 2-->
                <el-table style="width: 100%;height: auto;overflow: hidden;" border :data="form.skuList"
                    :span-method="skuListSpanhandle">
                    <el-table-column
                        v-for="(item, index) in form.specificationList.filter((item: skuLists) => item.values.length > 0)"
                        :prop="'sku_' + item.title" :label="item.title" :key="item.title">
                    </el-table-column>
                    <!-- 渲染后的表(列+行) 3-->
                    <el-table-column label="skuId" width="120" align="center" />
                    <el-table-column prop="price" label="￥价格(元)" align="center" width="150">
                        <template #default="scope">
                            <el-input-number v-model="scope.row.price" :min="1" @change="handleChange" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="vipPrice" label="￥VIP价(元)" align="center" width="150">
                        <template #default="scope">
                            <el-input-number v-model="scope.row.vipPrice" :min="1" @change="handleChange" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="originalPrice" label="￥吊牌价(元)" align="center" width="150">
                        <template #default="scope">
                            <el-input-number v-model="scope.row.originalPrice" :min="1" @change="handleChange" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="stock" label="库存(件)" align="center" width="150">
                        <template #default="scope">
                            <el-input-number v-model="scope.row.stock" :min="1" @change="handleChange" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="weight" label="重量(克)" align="center" width="150">
                        <template #default="scope">
                            <el-input-number v-model="scope.row.weight" :min="1" @change="handleChange" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="img" label="SKU图片" align="center">
                        <template #default="scope">
                            <el-upload action="http://192.168.1.188:8080/upload/admin" v-model="scope.row.img"
                                :on-success="handleAvatarSuccessd" :headers="headers" :show-file-list="false"
                                :before-upload="beforeAvatarUploads" class="avatar-uploaders">
                                <img v-if="scope.row.img" :src="scope.row.img" class="avatar" />
                                <el-button v-else type="primary" :icon="Upload" size="small"
                                    @click="indexImg = scope.$index"></el-button>
                            </el-upload>
                        </template>
                    </el-table-column>
                    <el-table-column prop="barCode" label="条形码" align="center" width="200">
                        <template #default="scope">
                            <el-input v-model="scope.row.barCode" style="width: 200px;">
                                <template #append>
                                    <el-button @click="scope.row.barCode = new Date().getTime()">随机</el-button>
                                </template>
                            </el-input>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div style="display: flex;justify-content: space-between;">
                <div></div>
                <p><el-button type="primary" @click="saveGoods">保存商品</el-button></p>
            </div>
            <!-- 对话框--批量定价--sku表格 -->
            <el-dialog v-model="dialogPriceVisible" title="批量定价" width="30%">
                <template #footer>
                    <el-form ref="ruleFormRef" :model="priceForm" :rules="rules" label-width="120px"
                        class="demo-ruleForm" :size="formSize" status-icon>
                        <el-form-item label="现价(￥)" prop="price" :label-width="150">
                            <el-input-number v-model="priceForm.price" :min="1" @change="handleChange" />
                        </el-form-item>
                        <el-form-item label="VIP价(￥)" prop="vipPrice" :label-width="150">
                            <el-input-number v-model="priceForm.vipPrice" :min="1" @change="handleChange" />
                        </el-form-item>
                        <el-form-item label="吊牌价(￥)" prop="originalPrice" :label-width="150">
                            <el-input-number v-model="priceForm.originalPrice" :min="1" @change="handleChange" />
                        </el-form-item>
                        <el-form-item label="重量(克)" prop="weight" :label-width="150">
                            <el-input-number v-model="priceForm.weight" :min="1" @change="handleChange" />
                        </el-form-item>
                    </el-form>
                    <span class="dialog-footer">
                        <el-button @click="dialogPriceVisible = false">取消</el-button>
                        <el-button type="primary" @click="confrimPrice">
                            确定
                        </el-button>
                    </span>
                </template>
            </el-dialog>
        </el-card>
    </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, reactive, nextTick } from 'vue'
import { Plus, Upload } from '@element-plus/icons-vue'//引入图标
import type { goodsForm, freights, sizeList, skuLists, bulks } from '@/type/params'//引入类型
import type { FormInstance, FormRules, UploadProps } from 'element-plus'
import { post } from '@/untils/request'//引入请求方式
import { ElMessage } from 'element-plus'//引入消息提示框
import { friendlyDates } from '@/time/friendlTime'//引入友好日期
import cookie from 'js-cookie'
import { ElInput } from 'element-plus'
import { toArray } from 'lodash'
import { useRouter } from "vue-router"//引入路由

const router = useRouter()
const indexImg = ref(0)
const InputRef = ref()//输入框节点
const ruleFormRef = ref<FormInstance>()//表单节点
const bool = ref(false)//bool标识,判断添加/修改
const dialogVisible = ref(false)//商品参数--对话框，默认隐藏  
const dialogVisibles = ref(false)//规格纬度参数--对话框，默认隐藏
const dialogPriceVisible = ref(false)//规格纬度参数--对话框，默认隐藏
const formSize = ref('default')//表单大小
const categoryDate = ref([])//类目列表
const freightType = ref<freights[]>([])//运费模版列表
//整体表单数据
const form = ref<goodsForm>({
    title: '',//商品名称
    originalPrice: 0,//原始价格
    price: 0,//现价
    vipPrice: 0,//会员价格
    stock: 0,//库存
    freightTemplateId: undefined,//运费模版
    status: 0,//商品状态
    img: '',//商品图片
    imgList: [],//存放所有图片
    unit: '',//商品单位
    detail: '',//商品详细介绍简介 
    description: '',//商品简介
    categoryId: '',//所属类目
    attributeList: [],//商品参数列表
    specificationList: [],//规格纬度列表
    skuList: [],//sku列表

})

//设置商品参数列表数据
const setParamsform = ref({
    attribute: '',//商品参数名称
    value: '',//商品参数名称
})
//规格纬度列表数据
let sizeForm = ref<sizeList>({
    gmtCreate: '',//创建时间
    times: '',//处理好的时间
    index: 0,//下标
    title: '',//类型名称
    inputSkuTagValue: '',//输入框绑定值
    inputSkuTagVisible: false,//控制输入框显示与隐藏
    gmtUpdate: 0,
})
//sku详情列表数据
const priceForm = ref<skuLists>({
    price: 0,//现价
    originalPrice: 0,//原价
    vipPrice: 0,//vip价格
    barCode: 0,//条形码
    stock: 0,//库存
    weight: 0,//重量
    img: '',//sku图片
    inputSkuTagValue: false,//输入框绑定值
    inputSkuTagVisible: false,//控制输入框显示与隐藏
    values: [],
    title: '',
    specification: '',
    names: ''

})
//清空后的sku表格的批量定价弹框列表数据
const ClearpriceForm = ref<bulks>({
    price: 0,//现价
    originalPrice: 0,//原价
    vipPrice: 0,//vip价格
    weight: 0,//重量
})
const skuLength = ref(0) //合并sku表格列表
//生命周期---挂载后
onMounted(() => {
    init()
})
//渲染
function init() {
    const details = reactive({
        _gp: 'admin.category',
        _mt: 'categoryTree'
    })
    post(details).then(res => {//渲染商品类目列表
        categoryDate.value = res.data
    }).catch(err => {
        console.log(err);
    })

    const freights = reactive({
        _gp: 'admin.freight',
        _mt: 'list'
    })
    post(freights).then(res => {//渲染运费模版列表
        freightType.value = res.data
    }).catch(err => {
        console.log(err);
    })
}
//表单规则--非空验证
const rules = reactive<FormRules>({
    originalPrice: [
        { required: true, message: '原始价格不能为空', trigger: 'blur' },
    ],
    price: [
        { required: true, message: '当前价格不能为空', trigger: 'blur' },
    ],
    vipPrice: [
        { required: true, message: 'VIP价格不能为空', trigger: 'blur' },
    ],
    status: [
        { required: true, message: '商品状态不能为空', trigger: 'blur' },
    ],
    unit: [
        { required: true, message: '商品单位不能为空', trigger: 'blur' },
    ],
    attribute: [
        { required: true, message: '商品参数名称不能为空', trigger: 'blur' },
    ],
    value: [
        { required: true, message: '商品参数女值不能为空', trigger: 'blur' },
    ],
    title: [
        { required: true, message: '类型名称不能为空', trigger: 'blur' },
    ],
    weight: [
        { required: true, message: '重量不能为空', trigger: 'blur' },
    ]

})

//存储请求头
const headers = reactive({
    AdminToken: cookie.get('token')
})
//上传图片--sku表格
const handleAvatarSuccessd: UploadProps['onSuccess'] = (response) => {
    if (200 == response.errno) {
        form.value.imgList.push(response.url)//存储图片--ssku表
        form.value.skuList[indexImg.value].img = response.url
    }
}
//处理上传图片的大小规格--sku表格
const beforeAvatarUploads: UploadProps['beforeUpload'] = (rawFile) => {
    if (rawFile.type !== 'image/jpeg') {
        ElMessage.error('Avatar picture must be JPG format!')
        return false
    } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error('Avatar picture size can not exceed 2MB!')
        return false
    }
    return true
}

//上传图片
const handleAvatarSuccess: UploadProps['onSuccess'] = (response) => {
    if (200 == response.errno) {
        form.value.imgList.push(response.url)//存储图片
        form.value.img = response.url
    }
}
//处理上传图片的条件
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    if (rawFile.type !== 'image/jpeg') {
        ElMessage.error('Avatar picture must be JPG format!')
        return false
    } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error('Avatar picture size can not exceed 2MB!')
        return false
    }
    return true
}

//移除上传的图片
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
    form.value.img = uploadFiles
    form.value.imgList = uploadFiles.map(item => item.response.url)
}
//上传图片数量限制
const handleLimit: UploadProps['onExceed'] = () => {
    ElMessage.warning('上传的数量不能超过5张!')
}
//富文本框事件
function getText(v: string) {
    form.value.detail = v//赋值
}
//添加--商品参数
function add() {
    dialogVisible.value = true//显示对话框
}
//删除--商品参数表
function handlDelt(index: number) {
    form.value.attributeList.splice(index, 1)
    ElMessage.success('删除成功!')
}
//确定按钮--商品参数
function confrimParams() {
    if (setParamsform.value.attribute == '') {
        ElMessage.warning('商品参数名称不能为空')
        return
    } else if (setParamsform.value.value == '') {
        ElMessage.warning('商品参数值不能为空')
        return
    }
    let index = form.value.attributeList.findIndex((item: any) => item.attribute == setParamsform.value.attribute)
    if (index != -1) {//index对于-1没有并且取反
        return ElMessage.error('商品参数名称不能重复添加')
    }
    form.value.attributeList.push({
        ...setParamsform.value
    })
    dialogVisible.value = false//隐藏对话框
    setParamsform.value.attribute = '',
        setParamsform.value.value = ''

}
//添加-规格维度--弹框
function adds() {
    bool.value = true
    dialogVisibles.value = true//显示对话框
    sizeForm.value.title = undefined
}
//编辑--规格维度--弹框
function handlEdit(index: number, row: goodsForm) {
    bool.value = false
    dialogVisibles.value = true//显示对话框
    sizeForm.value.index = index
    Object.assign(sizeForm.value, row)

}
//确定按钮--规格维度
function confrimSize() {
    if (sizeForm.value.title == '') {
        ElMessage.warning('类型名称不能为空')
        return
    }
    console.log(form.value.skuList, 999);
    let index = form.value.specificationList.findIndex((item: any) => item.shopSkuTitle == sizeForm.value.title)
    console.log(form.value.specificationList, 111);
    if (index != -1) {//index对于-1没有并且取反
        return ElMessage.error('类型名称不能重复添加')
    }
    if (bool.value == true) {//bool为true进入提交纬度规格
        sizeForm.value.times = friendlyDates(new Date().getTime())
        sizeForm.value.gmtCreate = new Date().getTime()
        form.value.specificationList.push({
            values: [],
            ...sizeForm.value
        })
    } else if (bool.value == false) {//bool为false进入编辑纬度规格
        form.value.specificationList[sizeForm.value.index].title = sizeForm.value.title//赋值下标给弹框中的纬度规格表单的输入框值
    }
    dialogVisibles.value = false//隐藏对话框
    sizeForm.value.title = '',//清空历史记录
        sizeForm.value.gmtCreate = undefined

}
//删除--规格维度
function handlDelts(index: number) {
    form.value.specificationList.splice(index, 1)
    ElMessage.success('删除成功!')
}
//移除标签
const handleClose = (item: skuLists, tag: any,) => {
    item.values.splice(item.values.indexOf(tag), 1)
    skuList()
}

//显示输入框
const showInput = (item: skuLists) => {
    item.inputSkuTagVisible = true //显示输入框
    nextTick(() => {//模拟失去与或得焦点事件--回车就可添加tag标签
        InputRef.value[0].focus()
    })
}

//添加tag标签--确定按钮
function handleInputConfirm(item: skuLists) {
    item.values = toArray(item.values)//dynamicTags转型为数组
    if (item.inputSkuTagValue) {
        if (!item.values.includes(item.inputSkuTagValue)) {//去掉重复添加的tag标签
            item.values = toArray(item.values)//dynamicTags转型为数组
            item.values.push(item.inputSkuTagValue)//否则添加一个新标签
        } else {
            return ElMessage.error('标签名称不能重复添加')//重复弹出 错误提示
        }
    }
    item.inputSkuTagVisible = false//隐藏输入框
    item.inputSkuTagValue = ''//清空输入框值
    skuList()
}

//生成sku表
function skuList() {
    //过滤tag标签，生成2维数组: 
    const specList = form.value.specificationList
    const valueLists = specList.filter((item: skuLists) => item.values.length).map((item: skuLists) => item.values)
    console.log(valueLists, 1111)
    // 添加name值
    const titles = specList.filter((item: skuLists) => item.title.length).map((item: skuLists) => item.title)
    if (valueLists.length == 0) return form.value.skuList = []
    //根据属性,生成笛卡尔数据---2维数组变4个数组
    let decareList = valueLists.reduce((pre: string[][], next: string[]) => {
        let array: string[][] = []
        pre.forEach(item1 => {
            if (next.length != 0) {
                next.forEach((item2: string) => {
                    array.push(item1.concat([item2]))
                })
            }
        })
        return array
    }, [[]]);
    //构建sku表格--最终渲染出表格
    let list = decareList.map((item: any) => {
        let obj = { //对象将属性值并渲染到sku表格中
            price: 0,//现价
            barCode: 0,
            originalPrice: 0,//原价
            vipPrice: 0,//vip价格
            stock: 0,//库存
            specification: '',
            title: '',
            weight: 0//重量

        } as any
        // 遍历循环添加到sku数组中
        item.forEach((val: number, index: number) => {
            // 相当于是添加一个对象
            obj['sku_' + titles[index]] = val;
            obj['title'] = item.join(',')
            console.log(obj['specification'], 555);
            obj['specification'] += form.value.specificationList[index].title + '_' + val + ','
            console.log(obj['specification'], 8888);
        });
        obj.title = obj.title.slice(0, obj.title.length - 1)
        return obj;
    })
    skuLength.value = list.length;
    form.value.skuList.length = 0;
    Object.assign(form.value.skuList, list)//最终合并渲染数据到sku表
}

//合并sku表格事件
function skuListSpanhandle({ rowIndex, columnIndex }: { rowIndex: number, columnIndex: number }) {
    //拿到第一列要合并的行数
    let specList = form.value.specificationList.filter((e: any) => e.values?.length > 0);
    if (columnIndex < specList.length - 1) {
        let rowSpanNum = 1;
        for (let i = columnIndex + 1; i < specList.length; i++) {
            //依次拿到每一列要合并的行数
            rowSpanNum *= specList[i].values.length;
        }
        if (rowIndex % rowSpanNum === 0) {
            //当条件成立时，即合并行数
            return { rowspan: rowSpanNum, colspan: 1 }
        } else {
            return { rowspan: 0, colspan: 0 }
        }
    }
}

//数字输入框事件
function handleChange(value: number) {
    console.log(value)
}
//批量定价--商品(sku)详情--弹框
function bulkPricing() {
    dialogPriceVisible.value = true//显示对话框

}
//批量定价确定按钮----商品(sku)详情
function confrimPrice() {
    if (priceForm.value.vipPrice >= priceForm.value.price && priceForm.value.vipPrice >= priceForm.value.originalPrice) {
        ElMessage.error('VIP价格不能>=现价>=原价')
        return
    }
    if (priceForm.value.price >= priceForm.value.originalPrice) {
        ElMessage.error('现价不能>=原价')
        return
    }
    if (priceForm.value.weight == undefined) {
        ElMessage.warning('重量不能为空')
        return
    }
    form.value.skuList.forEach((item: skuLists) => {
        item.price = priceForm.value.price
        item.vipPrice = priceForm.value.vipPrice
        item.originalPrice = priceForm.value.originalPrice
        item.weight = priceForm.value.weight
    });
    Object.assign(priceForm.value, ClearpriceForm.value)//清空历史记录
    dialogPriceVisible.value = false//隐藏对话框
}
//保存商品按钮
function saveGoods() {
    if (form.value.title == '') {
        ElMessage.warning('商品名称不能为空')
    }
    const spuDTO = JSON.stringify(form.value)
    console.log(form.value, 'form');
    post({
        _gp: 'admin.product',
        _mt: 'create',
        spuDTO
    }).then(res => {
        console.log(form.value, '创建')
        let { errno, errmsg } = res
        if (200 === errno) {
            //@ts-ignore
            ElMessageBox.confirm(
                '商品添加成功,是否继续添加商品?',
                '创建成功',
                {
                    confirmButtonText: '关闭',
                    cancelButtonText: '继续'
                }
            )
                .then(() => {
                    router.replace({//跳转商品列表管理页面
                        name: 'goods'
                    })
                })
                .catch(() => {
                    window.history.go(0)//清空页面，方便添加新数据
                })
            init()//刷新
        } else {
            ElMessage.error(errmsg)
        }
    }).catch(err => console.log(err))
}
</script> 
<style lang="less" scoped>
.main {
    .box-card {
        width: 100%;

        .el-form {
            .el-form-item:nth-child(1) {
                font-weight: bold;

                .avatar-uploader .avatar {
                    width: 178px;
                    height: 178px;
                    display: block;
                }
            }
        }
    }

    &::v-deep .el-dialog__body {
        padding: 0;
    }

    .el-dialog {
        .el-form {
            width: 80%;
            justify-content: space-around;
        }
    }

    .avatar-uploader .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }

    .avatar-uploaders .avatar {
        width: 50px;
        height: 50px;
        display: block;
    }
}
</style>
<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    text-align: center;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}

.avatar-uploaders .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploaders.el-upload:hover {
    border-color: var(--el-color-primary);
}

.avatar-uploaders-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>

